<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['bank:number:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['bank:number:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['bank:number:remove']"
        >删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="numberList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="监管名称" align="center" prop="reportName"/>
      <el-table-column label="陪同人" align="center" prop="accompanyingPerson"/>
      <el-table-column label="监管说明" align="center" prop="reportContent"/>
      <el-table-column label="监管结果" align="center" prop="remark"/>
      <el-table-column label="监管反馈" align="center" prop="evaluate"/>
      <el-table-column label="监管时间" align="center" prop="reportTime"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['bank:number:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['bank:number:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改开户行管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel">
      <el-tabs type="border-card">
        <el-tab-pane label="填写信息">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="监管名称" prop="reportName">
              <el-input v-model="form.reportName" placeholder="请输入监管名称"/>
              <el-input v-if="1==2" v-model="form.longitude" placeholder="请输入监管名称"/>
              <el-input v-if="1==2" v-model="form.dimension" placeholder="请输入监管名称"/>
            </el-form-item>
            <el-form-item label="监管时间" prop="reportTime">
              <el-date-picker
                v-model="form.reportTime"
                type="date"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="陪同人" prop="accompanyingPerson">
              <el-input v-model="form.accompanyingPerson" placeholder="请输入陪同人"/>
            </el-form-item>
            <el-form-item label="监管说明" prop="reportContent">
              <el-input v-model="form.reportContent" type="textarea" placeholder="请输入监管说明"/>
            </el-form-item>
            <el-form-item label="监管结果" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入监管结果"/>
            </el-form-item>
            <el-form-item label="监管反馈" prop="evaluate">
              <el-input v-model="form.evaluate" type="textarea" placeholder="请输入监管反馈"/>
            </el-form-item>
            <!-- <el-form-item label="附件" prop="by3">
               <el-upload
                 class="avatar-uploader"
                 :action="productFileAction"
                 :file-list="fileList"
                 list-type="picture-card"
                 :before-upload="beforeUpload"
                 :headers="headers"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :on-success="uploadSuccess"
                 :on-exceed="masterFileMax"
                 :limit=limit
                 multiple
                 accept="image/*"
                 name="uploadfiles">
                 <i class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
               <el-input type="textarea" v-show="1==2" v-model="form.by3" placeholder="请输入附加"/>
             </el-form-item>-->
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="选择位置">
          <baidu-map id="container" ref="customOverlay" @ready="mapHandler" :style="{width:map.width,height:map.height}"
                     class="bm-view"
                     @click="clickHandler"
                     :center="{lng: 115.944517, lat: 38.943799}" :zoom="12"
                     :scroll-wheel-zoom="true" ak="wqSWEzEusGT6RxylRnBj3iY7RI5u0Tqe">
            <!--            <Scale anchor="BMAP_ANCHOR_TOP_RIGHT"></Scale>-->
            <!--            <Geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></Geolocation>-->

            <bmmarker v-for="item in dList" :position="{lng: item.longitude, lat: item.dimension}"
                      @click="infoWindowOpen(item)">
              <InfoWindow :show="item.by1" @close="infoWindowClose(item)" @open="infoWindowOpen(item)">
                <p style='text-align:left;font-weight:800'>标题:{{ item.reportName }}</p>
                　　　　　　<p style='text-align:left;font-weight:0'>信息:{{ item.reportContent }}</p>
                <!--          <img src="../../../assets/image/profile.jpg" class="user-avator" alt/>-->
              </InfoWindow>
            </bmmarker>


           <!-- <bmmarker :position="{lng: lng, lat: lat}" :dragging="true"
                      @click="infoWindowOpen">
              <InfoWindow :show="show" @close="infoWindowClose" @open="infoWindowOpen"><p
                style='text-align:left;font-weight:800'>标题:监督信息</p>
                　　　　　　<p style='text-align:left;font-weight:0'>信息:无异常</p>
                <img src="../../../assets/image/profile.jpg" class="user-avator" alt/></InfoWindow>
            </bmmarker>-->
          </baidu-map>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {addSupervise, delSupervise, getSupervise, listSupervise, updateSupervise} from "@/api/jdgl/supervise";
import BaiduMap from "vue-baidu-map/components/map/Map";
import Scale from "vue-baidu-map/components/controls/Scale";
import Geolocation from "vue-baidu-map/components/controls/Geolocation";
import bmmarker from "vue-baidu-map/components/overlays/Marker";
import InfoWindow from "vue-baidu-map/components/overlays/InfoWindow";

export default {
  components: {
    BaiduMap,
    Scale,
    Geolocation,
    bmmarker,
    InfoWindow
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload()  // 当位置发生变化时，重新渲染，内部会调用draw
      },
      deep: true
    }
  },
  data() {
    return {
      map: {
        center: {lng: 118.802422, lat: 32.065631},//'南京市',
        zoom: 12,
        width: '1000px',
        height: '520px'
      },
      lng: null,
      lat: null,
      markerPoint: {lng: 116.404, lat: 39.915},
      show: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [],
      queryParams: {},
      title: '',
      active: 0,
      // 表单参数
      form: {
        superviseId: null,
        accompanyingPerson: null,
        reportUserName: null,
        reportName: null,
        reportTime: null,
        reportContent: null,
        longitude: null,
        dimension: null,
        evaluate: null,
        reportfj: null,
        remark: null,
      },
      fileList: [],
      // 显示搜索条件
      showSearch: true,
      limit: 5,
      total: 0,
      // 是否显示弹出层
      open: false,
      loading: false,
      numberList: [],
      dList: [],
      headers: {Authorization: 'Bearer ' + getToken()},
      productFileAction: process.env.VUE_APP_BASE_API + '/system/resource/profile/upload',
      imageTempList: [],
      imageList: "",
      productfileList: [],
      // 表单校验
      rules: {
        reportName: [
          {required: true, message: "监管名称不能为空", trigger: "blur"}
        ],
        reportTime: [
          {required: true, message: "监管时间不能为空", trigger: "blur"}
        ],
        reportContent: [
          {required: true, message: "监管说明不能为空", trigger: "blur"}
        ],
        accompanyingPerson: [
          {required: true, message: "陪同人不能为空", trigger: "blur"}
        ],
      }
    }
  },
  created() {
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
    this.getList();
  },
  methods: {
    mapHandler({BMap, map}) {
      this.BMap = BMap;
      this.mapZoom = 15;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.superviseId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    getList() {
      this.loading = true;
      listSupervise(this.queryParams).then(response => {
        this.numberList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleAdd() {
      // this.reset();
      this.open = true;
      this.title = "监督任务";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      let _this = this;
      const id = row.superviseId || this.ids;
      getSupervise(id).then(response => {
        this.dList.push(response.data);
        this.lng = response.data.longitude;
        this.lat = response.data.dimension;
        this.form = response.data;
        this.open = true;
        this.title = "修改监督任务";
      });
    },
    handleRemove(file, fileList) {
      this.imageTempList = [];
      this.imageList = '';
      if (fileList.length < 1) {
        this.form1.by3 = "";
      }
      fileList.forEach(item => {
        if (item.url.indexOf("blob:") > -1) {
          let url = process.env.VUE_APP_BASE_API + item.response.data[0];
          let imageInfo = {name: file.name, url: url};
          this.imageTempList.push(imageInfo);
          if (this.imageList == "") {
            this.imageList = this.imageList + url;
            this.form1.by3 = this.imageList;
          } else {
            this.imageList = this.imageList + "," + url;
            this.form1.by3 = this.imageList;
          }
        } else {
          let url = item.url;
          let imageInfo = {name: item.name, url: url};
          this.imageTempList.push(imageInfo);
          if (this.imageList == "") {
            this.imageList = this.imageList + url;
            this.form1.by3 = this.imageList;
          } else {
            this.imageList = this.imageList + "," + url;
            this.form1.by3 = this.imageList;
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.superviseId || this.ids;
      this.$confirm('是否确认删除数据项?', "警告", {
        cancelButtonClass: 'btn-custom-cancel',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delSupervise(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    masterFileMax(files, fileList) {
      this.$message.warning(`最多只允许上传 ${this.limit} 个附件。`);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      // 图片显示前做一下判断
      let isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error('上传图片格式不对!');
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.dList=[];
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        budgetId: null,
        name: null,
        state: null,
        year: null,
        sdate: null,
        edate: null,
        budgetpersonid: null,
        budgetperson: null,
        budgetmoney: null,
        submittime: null,
        number: null,
        departmentCode: null,
        remarks: null,
        approvedperson: null,
        approveddate: null,
        createtime: null,
        by1: null,
        by2: null,
        by3: null
      };
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.longitude == null || this.form.longitude == '' || this.form.dimension == null || this.form.dimension == '') {
            this.$message.warning("请选择位置");
          } else {
            this.form.reportUserName = this.form.accompanyingPerson;
            if (this.form.superviseId != null) {
              updateSupervise(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addSupervise(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        }
      });
    },
    clickHandler(e) {
      let self = this;
      // self.msgSuccess(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
      this.lng = e.point.lng;
      this.lat = e.point.lat;
      this.form.longitude = e.point.lng;
      this.form.dimension = e.point.lat;
      /*let map = new BMap.Map("container");
      let point = new BMap.Point(e.point.lng, e.point.lat);
      let marker = new BMap.Marker(point);
      map.addOverlay(marker);*/
      /* gc.getLocation(point, res => {
         self.locData.address = res.address;
         self.locData.longitude = point.lng;
         self.locData.latitude = point.lat;
         window.map.addOverlay(myMarker);
       })*/
      /* self.locData.longitude = e.point.lng
       self.locData.latitude = e.point.lat*/
      // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
      /* this.$confirm('确认添加标注?', "警告", {
         cancelButtonClass: 'btn-custom-cancel',
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(function () {
         self.msgSuccess(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
       });*/
    },
    initMap() {

    },
    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    }

  }
};
</script>
<style>
.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}

</style>
